<template lang="html">
    <!-- <div> -->
        <!-- <div class="mask" v-show="isShowMask"></div> -->
        <!-- <div @click="showToast">点击</div> -->
        <div class="toast" :class='{"active":isShowToast}' @click='isShowToast = false'>
<!--             <i class="toast__icon">
                <img :src="toastIcon" alt="">
            </i> -->
            <span class="toast__text">{{toastText}}</span>
        </div>
    <!-- </div> -->

</template>
<script>
    export default {

        data() {
            return {
                isShowMask: false,
                toastText: '激活码输入',
                toastIcon: '',
                closeTime: 0,
                isShowToast: false,
                timeout:null
            }
        },
        methods: {
            tourl(url) {
                tools.router.push({ path: url })
            },
            showToast(obj) {
                console.log(obj)
                if(this.isShowToast){
                    //当前有正在进行的toast

                    clearTimeout(this.timeout);
                    this.isShowToast = false;
                    setTimeout( () => {
                        this.toastText = obj;
                        this.isShowToast = true;
                        this.timeout = setTimeout( () => {
                            this.isShowToast = false;
                        },1500)
                    },300)
                }else{
                    this.isShowToast = true;
                    this.toastText = obj;

                    this.timeout = setTimeout( () => {
                        this.isShowToast = false;
                    },1500)
                }

            },
            hideToast() {
                let _this = this
                setTimeout(function () {
                    _this.isShowToast = false
                }, _this.closeTime)
            }
        },
        mounted() {
            var _this = this;
        },
        components: {

        }
    }
</script>

<style scoped lang='scss'>
    @import '../assets/scss/tool.scss';
    @import '../assets/faicon/css/font-awesome.min.css';
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .toast {
        width: pxTorem(170px);
        height: pxTorem(40px);
        padding: 0 pxTorem(15px);
        line-height: pxTorem(40px);
        text-align: center;
        background: rgba(0,0,0,.5);
        border-radius: pxTorem(10px);
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        transition: all .3s ease;
        z-index: -1;
        overflow:hidden;
        opacity: 0;
        -webkit-transform: translateY(pxTorem(-20px));
        transform: translateY(pxTorem(-20px));

        &.active{
            z-index: 10000;
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .toast__icon {}
</style>